<template>
  <div class="outer-input" :style="{width:`${width}%`}">
    <div class="input-title">
        <span class="need" v-if="struc?.must">*</span>
        <span class="label-name">{{ struc?.viewName }}</span>
    </div>
    <div class="input-contextPackage">
      <div class="radios-seach">
        <div class="radios">
          <el-radio-group v-model="valueInput.value" size="mini">
            <el-radio-button label="空闲"></el-radio-button>
            <el-radio-button label="咨询中"></el-radio-button>
            <el-radio-button label="不可约"></el-radio-button>
            <el-radio-button label="全部"></el-radio-button>
          </el-radio-group>
        </div>
        <div class="search-input">
          <el-input
            placeholder="请输入"
            suffix-icon="el-icon-search"
            class="input-1"
            >
          </el-input>
        </div>
      </div>
      <div class="select-content">
        <div class="select-doctor d-active" v-for="i in 3" :key="i"  @click="handleItem(i)">
          <div class="info">
            <span>张三</span>
            <span>等待: 3</span>
          </div>
          <div class="status">
            <span>休息</span>
          </div>
        </div>
      </div>
      
      <span class="errorhint" v-if="showError">{{
        struc?.errorHit
      }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, PropType, ref, reactive, computed } from "vue";
import useDataCheck, { DataStruc } from "../../hook/datastruc";

export default defineComponent({
  type: 401,
  name: "Tdoctor",
  props: {
    struc: {
      type: Object as PropType<DataStruc>,
    },
    passWidth: {
			type: Number
		}
  },
  setup: (props, context) => {
    let showError = ref(false);
    let valueInput: DataStruc = reactive(props.struc as DataStruc);
    const dataCheck = useDataCheck();
    let check = () => {
      if (props.struc?.value) {
        showError.value = false;
  		} else {
        console.debug("检查出错：", showError);
        showError.value = true;
			}
			
      return !showError.value;
    };

    const handleItem = (i:any) => {
      console.log('点击了一项')
    }

    const width = computed(() => props.passWidth)

    onMounted(() => {
      dataCheck.addDataCheck(check);
    });

    return { showError, check, valueInput, width, handleItem };
  },

  methods: {
    out(event: MouseEvent) {
      if(!this.valueInput.must) {
					this.showError = false;
				} else {
					this.check()
				}
    },
  },
});
</script>

<style scoped lang="scss">
@import '@style/extend';
.outer-input {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  width: 100%;
  padding-right: 10px;
  box-sizing: border-box;
  .input-title {
    padding-bottom: 10px;
    .need {
      color: red;
    }
    .label-name {
      font-size: $fontSize-1
    }
  
  }

  .input-contextPackage {
    .radios-seach {
      display: flex;
      align-content: center;
      .radios {
        padding-right: 30px;
      }
    }
    .select-content {
      padding-top: 10px;
      display: flex;
      .select-doctor {
        width: 120px;
        height: 50px;
        border-radius: $radius-1;
        border: 1px solid #e9e9e9;
        font-size: $fontSize;
        display: flex;
        flex-direction: column;
        align-content: center;
        margin-right: 5px;
        .info {
          height: 25px;
          line-height: 25px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          & > span:nth-child(1) {
            font-size: $fontSize-1;
          }
        }

        .status {
          height: 25px;
          line-height: 25px;
          padding-left: 15px;
          color: $a8-Color;
        }
      }
    }
    .errorhint {
      @extend .error;
      height: 10px;
      display: block;
      line-height: 1;
    }
  }
}

.d-active {
  background: $mainColor;
  color: white;
  border: none !important;
  .status {
    color: white !important; 
  }
}
</style>
